import React, {useState, useEffect} from 'react'
import { setComponents, SchemaRender } from 'react-schema-render';
import { Collapse, Descriptions, Tree, Tabs } from 'antd';
import axios from 'axios';

const { Panel } = Collapse;
const components = {
    collapse: Collapse,
    panel: Panel,
    descriptions: Descriptions,
    tree: Tree,
    tabs: Tabs,
};

/* antd组件测试： */
/* List组件没啥意义，直接用div即可 */
/* Tabs自身有问题，item项的children不支持schema。对比tabs和tabs2：tabs2因为第一个item的children引入了高级组件因此出错，但是tabs2/1能正确渲染 */
/* Tree组件调通了，但是这种目录结构一般是跟右边的content联动才有价值，单独的Tree价值比较鸡肋 */
/* Collapse组件不错 */
/* Descriptions组件不错 */

setComponents(components);

const MyLinker = (props) => {

    const name = props.match.params.name;
    const [schemas, setSchemas] = useState([]);

    useEffect(() => {
        const jsonFile = "/link/" + name + ".json";
        // console.log(jsonFile);
        const fetchData = async () => {
            axios
            .get(jsonFile)
            .then(res => {
                if(res.data) {
                    console.log("GET http://localhost:3000" + jsonFile + " 200 OK");
                    setSchemas(res.data);
                }
            })
            .catch((e) => {
                setSchemas({
                    "component": "div",
                    "children": "schema not found"
                });
            });
        }

        fetchData();

    }, [name]);

    const getSchema = (index) => {
        if (schemas.length === 0) {
            return [];
        }
        if (index === undefined) {
            return schemas;
        }
        if (index.indexOf("/") !== -1) {
            return {
                "component": "div",
                "children": "index param invalid"
            }
        }
        try {
            let items = schemas.items;
            if (items === undefined) {
                items = schemas.children;
            }
            for(let i=0, leni = items.length; i < leni; i++) {
                if(index === items[i].key) {
                    if (!items[i].component) {
                        items[i].component = "div";
                    }
                    return items[i];
                }
            }
            return {
                "component": "div",
                "children": "index page not found"
            }
        } catch(e) {
        };
        return schemas;
    };

    const getIndex = () => {
        var index;
        const url = props.match.url;  // '/link/tabs'
        const pathname = props.location.pathname; // '/link/tabs/1'
        if (url === pathname) {
            return index; // undefined
        }
        /* 测试发现，url只会在/link/tabs/的时候取该值，其余时候都是/link/tabs */
        index = pathname.substring(url.length + 1, pathname.length);
        if (index[index.length -1] === "/") {
            index = pathname.substring(url.length + 1, pathname.length - 1);
        }
        // console.log(props, name, index, url, pathname);
        return index;
    }

    const index = getIndex();
    const schema = getSchema(index);

    return (
        <SchemaRender schema={schema}></SchemaRender>
    );

}

export default MyLinker;
